<template>
  <div class="footer" :style="{paddingLeft:`${paddingLeft}vw`,paddingRight:`${paddingRight}vw`}">
    <div>@2021 润联科技</div>
    <div class="icon">
      <div class="qq"></div>
      <div class="wx"></div>
      <div class="wb"></div>
      <div class="tb"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        
      }
    },
    props:{
      paddingLeft: {
        type: Number,
        default: 5,
      },
      paddingRight: {
        type: Number,
        default: 5,
      }
    },
    
  }
</script>
<style lang="less" scoped>
  @import url("../assets/css/global.less");
  .footer {
    height: 6rem;
    border-top: 1px solid @color-auxiliary;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    color: @color-auxiliary;
    .icon {
      &>div {
        height: 20px;
        display: inline-block;
        width:18px;
        background-size: 18px 20px;
        &.qq {
          background-image: url('../assets/images/qq.png');
          margin-right: 10px;
        }
        &.wx {
          background-image: url('../assets/images/wx.png');
          margin-right: 10px;
        }
        &.wb {
          background-image: url('../assets/images/wb.png');

        }
        &.tb {
          background-image: url('../assets/images/tb.png');
        }
      }
    }
  }
</style>